// // $(function(){
// //     $('[name="title"]').on('keydown',function(e){
// //         if(e.keyCode === 13){
// //             var arr=getData();
// //             //写入
// //             arr.push({title:$(this).val(),done:false});
// //             //数组存到本地
// //             saveData(local);
// //             $(this).val("");
// //             load();
// //             window.location.reload();
// //         }
// // })
// $(function(){
//     $('[name="title"]').on('keydown',function(e){
//         if(e.keyCode === 13){
//             var local=getData();
//             //写入
//             local.push({title:$(this).val(),done:false});
//             //数组存到本地
//             saveData(local);
//             $(this).val("");
//             loadData();
//             window.location.reload();
//         }
//     })

// function getData(){
//     var data =localStorage.getItem('todoList');
//     return data === null? []:JSON.parse(data); 
//     }

// function saveData(){
//     localStorage.setItem('todoList',JSON.stringify(data));
// }
    
// function loadData(){
//     $('.donelist,.todolist').empty();
//     var data =getData();
//     var completeCount = 0;
//     var beingCount = 0;
//     $.each(data,function(i,n){
//         var obj;
//         if(data[i].done){
//             obj=$('.donelist');
//             completeCount++;
//         }else{
//             elemObj = $('.todolist');
//             beingCount++;
//         }

//         obj.append(`
//         <li>
//         <input type="checkbox">
//         <p>${data[i].title}</p>
//         <a href="javascript:;" id="${i}" class="del"></a>
//         </li>`);
//     })  
//     $('.donelist').find('input').prop('checked', true);
//     $('.todocount').text(beingCount);
//     $('.donecount').text(completeCount);
//     triggerComplete(data);
//     deleteData(data);
// }

// //删
// function deleteData(data){
//     $('.todolist,.donelist').on('click', '.del', function () {
//         var title=$(this).siblings('p').html();
//         var index;
//         $.each(data, function (i, n) {
//             if (title == data[i].title) index = i;
//         })
//         data.splice(index, 1);
//         saveData(data);
//         loadData();
//     })
// }

// //编辑
// $(".todolist").on("click", "p", function () {
//     $(this).html("<input type='text' value='" + $(this).text() + "'>");
//     var $ipt= $(this).children();
//     $ipt.click(function(evt){
//         var e = evt || event;
//         e.stopPropagation();
//     })
//     $ipt.select();
//     $ipt.blur(function(evt){
//         this.outerHTML = this.value;
//     })
// })
// $("section").on("click", "a", function () {
//     $(this).parent().remove();
// })

// //checkbox
// function triggerComplete(data) {
//     $('.todolist,.donelist').on('click','input',function(){
//         var index = $(this).siblings('a').attr('id');
//         data[index].done = $(this).prop('checked');
//         saveData(data);
//         loadData();
//     })
// }
// loadData();
// })

$(function () {
    $('#title').on('keydown', function (event) {
        // 回车键保存待办事件
        if (event.keyCode == 13) {
            // 读取本地存储数据
            var local = getData();
            // 更新local数组
            // 追加数据
            local.push({ title: $(this).val(), done: false });
            // 把local数组存储到本地
            saveData(local);
            // 清空输入框 
            $(this).val("");
            // 渲染加载数据
            loadData();
            // 刷新页面
            window.location.reload();
        }
    });

    // 读取本地存储的数据
    function getData() {
        var data = localStorage.getItem('todoList');
        // 本地存储的数据是字符串格式的
        // 转化为对象格式
        return data != null ? JSON.parse(data) : [];
    }

    // 保存本地存储数据
    function saveData(data) {
        localStorage.setItem('todoList', JSON.stringify(data));
    }

    // 渲染加载数据
    function loadData() {
        // 清空数据
        $('.donelist,.todolist').empty();
        // 读取本地存储的数据
        var data = getData();
        // 计算数据数量
        var completeCount = 0;
        var beingCount = 0;
        // 遍历数据
        $.each(data, function (i, n) {
            var elemObj;
            if (data[i].done) {
                elemObj = $('.donelist');
                completeCount++;
            } else {
                elemObj = $('.todolist');
                beingCount++;
            }
            elemObj.append(`                    
                <li>
                    <input type="checkbox">
                    <p>${data[i].title}</p>
                    <a href="javascript:;" id="${i}" class="del"></a>
                </li>`);
        });
        $('.donelist').find('input').prop('checked', true);
        $('.todocount').text(beingCount);
        $('.donecount').text(completeCount);
        triggerComplete(data);
        deleteData(data);
    }

    // 给删除按钮绑定点击事件
    function deleteData(data) {
        $('.todolist,.donelist').on('click', '.del', function () {
            var title = $(this).siblings('p').html();
            var index;
            $.each(data, function (i, n) {
                if (title == data[i].title) index = i;
            })
            data.splice(index, 1);
            saveData(data);
            loadData();
        })
    }


    // 即时编辑
    $(".todolist").on("click", "p", function () {
        // 点击 放入input
        $(this).html("<input type='text' value='" + $(this).text() + "'>");
        //选择input输入框; 
        var $ipt = $(this).children()
        // 给当前输入框绑定点击事件，
        // 如果触发点击事件，那么就阻止掉事件冒泡; 
        $ipt.click(function (evt) {
            var e = evt || event;
            e.stopPropagation();
        })
        // 输入框文本全部选中; 
        $ipt.select();
        // 失去焦点
        $ipt.blur(function (evt) {
            this.outerHTML = this.value;
        })
    })

    $("section").on("click", "a", function () {
        $(this).parent().remove();
    })

    // 给input:checkbox添加事件 
    function triggerComplete(data) {
        $('.todolist,.donelist').on('click', 'input', function () {
            var index = $(this).siblings('a').attr('id');
            data[index].done = $(this).prop('checked');
            saveData(data);
            loadData();
        })
    }
    loadData();
})